<template>
	<view class="control">
		<view class="header">
			<nav-bar title="学员信息" color="white" />
			<view class="flex-align">
				<van-image width="150rpx" height="150rpx" fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<view class="info">
					<view class="name" v-if="studentlist.age != ''">{{studentlist.name}}</view>
					<view class="flex-align" v-if="studentlist.age != ''">
						<view class="tag" v-if="studentlist.sex == 1">
							男
						</view>
						<view class="tag" v-if="studentlist.sex == 2">
							女
						</view>
						<view class="tag" v-if="studentlist.age != ''">
							{{studentlist.age}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="con">
			<van-tabs :active="active" @change="onChange" title-inactive-color="rgb(153,153,153)"
				color="rgb(99,93,247)">
				<van-tab title="监护人/学员档案">
					<view class="section">
						<view class="item flex-space-between" v-if="studentlist.phone != ''">
							<view class="label">手机号</view>
							<view class="value">{{studentlist.phone}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian != ''">
							<view class="label">监护人</view>
							<view class="value">{{studentlist.custodian}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian_mobile != ''">
							<view class="label">监护人手机号</view>
							<view class="value">{{studentlist.custodian_mobile}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian_relation != ''">
							<view class="label">监护人关系</view>
							<view class="value">{{studentlist.custodian_relation}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian_t != ''">
							<view class="label">监护人2</view>
							<view class="value">{{studentlist.custodian_t}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian_t_mobile != ''">
							<view class="label">监护人2手机</view>
							<view class="value">{{studentlist.custodian_t_mobile}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.custodian_t_relation != ''">
							<view class="label">监护人2关系</view>
							<view class="value">{{studentlist.custodian_t_relation}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.id_card != ''">
							<view class="label">身份证号</view>
							<view class="value">{{studentlist.id_card}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.marital_status != ''">
							<view class="label">婚姻状况</view>
							<view class="value">{{studentlist.marital_status}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.birthday != ''">
							<view class="label">生日</view>
							<view class="value">{{studentlist.birthday}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.occupation_relation != ''">
							<view class="label">城市</view>
							<view class="value">{{studentlist.occupation_relation}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.address != ''">
							<view class="label">地址</view>
							<view class="value">{{studentlist.address}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.email != ''">
							<view class="label">邮箱</view>
							<view class="value">{{studentlist.email}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.height != ''">
							<view class="label">身高</view>
							<view class="value">{{studentlist.height}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.weight != ''">
							<view class="label">体重</view>
							<view class="value">{{studentlist.weight}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.company != ''">
							<view class="label">公司</view>
							<view class="value">{{studentlist.company}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.graduate != ''">
							<view class="label">学校</view>
							<view class="value">{{studentlist.graduate}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.grade_name != ''">
							<view class="label">年级</view>
							<view class="value">{{studentlist.grade_name}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.class_name != ''">
							<view class="label">班级</view>
							<view class="value">{{studentlist.class_name}}</view>
						</view>
						<view class="item flex-space-between" v-if="studentlist.occupation_relation != ''">
							<view class="label">职业</view>
							<view class="value">{{studentlist.occupation_relation}}</view>
						</view>
					</view>
				</van-tab>
				<!-- <van-tab title="学员档案">
					<view class="section">
						<view class="item flex-space-between">
							<view class="label">联系电话</view>
							<view class="value">1594554544</view>
						</view>
						<view class="item flex-space-between">
							<view class="label">生日</view>
							<view class="value">1933-15-55</view>
						</view>
						<view class="item flex-space-between">
							<view class="label">身高</view>
							<view class="value">172cm</view>
						</view>
						<view class="item flex-space-between">
							<view class="label">体重</view>
							<view class="value">120kg</view>
						</view>
						<view class="item flex-space-between">
							<view class="label">身份证</view>
							<view class="value">1548744556446549898</view>
						</view>
					</view>
				</van-tab> -->
			</van-tabs>
		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				active: 0,
				studentlist: {}
			}
		},
		onLoad(options) {
			this.student_id = options.student_id
			this.class_id = options.class_id
			this.student()
		},
		methods: {
			// 班级课节列表
			async student() {
				let that = this;
				let params = {
					app_id: this.$https.weixinAppId,
					student_id: this.student_id,
					class_id: this.class_id,
				};
				let res = await personal.student(params);
				if (res.code == 1) {
					this.studentlist = res.data
				}
			},
			onChange(e) {
				this.active = e.detail
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			padding: 20rpx 30rpx 60rpx;
			background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(144, 140, 246) 100%);

			/deep/ .van-image {
				border: 6rpx solid white;
			}

			.info {
				margin-left: 30rpx;
			}

			.name {
				color: rgb(255, 255, 255);
				font-size: 40rpx;
				font-weight: 700;
				margin-bottom: 30rpx;
			}

			.tag {
				padding: 7rpx 20rpx 8rpx;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				font-weight: 500;
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}

		.con {
			flex: 1;
			height: 0;
			overflow: auto;
			margin-top: -30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 40rpx 40rpx 0px 0px;

			/deep/ .van-tab--active {
				color: rgb(99, 93, 247);
				font-weight: 700;
			}

			.section {
				padding: 0px 30rpx;
				border-top: solid 6rpx rgb(239, 239, 239);

				.item {
					padding: 39rpx 0 40rpx;
					border-bottom: solid 2rpx rgb(229, 229, 229);
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;

					&:last-of-type {
						border: none;
					}
				}
			}
		}
	}
</style>